<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="block_left">
          <div class="left-top">选择题型</div>
          <div class="left-bottom">
              <div class="bottom-radio" @click="addQuestion(1)">
                  <span class="iconfont icon-selected-copy"></span>
                  <span>单选题</span>
              </div>
              <div class="bottom-checkbox" @click="addQuestion(2)">
                   <span class="iconfont icon-xuanzhong"></span>
                   <span>多选题</span>
              </div>
          </div>
      </div>
      <div class="block">
        <div class="tab-container">
            <div class="search-item">
                <div class="item-list">
                    <div class="item-con">
                        <span>问卷名称</span>
                        <el-select
                            size="mini"
                            clearable
                            v-model="infoForm.questionName"
                            placeholder="全部"
                        >
                            <el-option label="全部" value=""></el-option>
                            <el-option label="视频面签" value="1"></el-option>
                            <el-option label="法人开户" value="2"></el-option>
                        </el-select>
                    </div>
                    <div class="item-con">
                        <span>问卷标题</span>
                        <el-select
                            size="mini"
                            clearable
                            v-model="infoForm.questionTitle"
                            placeholder="全部"
                        >
                            <el-option label="全部" value=""></el-option>
                            <el-option label="视频面签" value="1"></el-option>
                            <el-option label="法人开户" value="2"></el-option>
                        </el-select>
                    </div>
                    <div class="item-con">
                        <span>关联业务</span>
                        <el-select
                            size="mini"
                            clearable
                            v-model="infoForm.relatebussiness"
                            placeholder="全部"
                        >
                            <el-option label="全部" value=""></el-option>
                            <el-option label="人脸识别" value="1"></el-option>
                            <el-option label="风险提示" value="2"></el-option>
                            <el-option label="声明朗读" value="3"></el-option>
                            <el-option label="客户签字" value="4"></el-option>
                        </el-select>
                    </div>
                    <div class="item-con">
                        <span>技能组</span>
                        <el-select
                            size="mini"
                            clearable
                            v-model="infoForm.skillGroup"
                            placeholder="全部"
                        >
                            <el-option label="全部" value=""></el-option>
                            <el-option label="技能组1" value="1"></el-option>
                            <el-option label="技能组2" value="2"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="search_save" ref="block">
                <div class="con-title">
                    <div class="content">
                        <div class="content-item" v-for="(item,index) in questionList" :key="index">
                            <span style="margin-right:30px;font-size:12px;color:#636972;display:inline-block;padding-bottom:5px">{{index+1}}</span>
                            <el-input type="textarea" :rows="1" v-model="item.questionTitle" size="mini" style="display:inline-block;width:50%" ></el-input>
                            <div style="display:inline-block;float:right">
                                <i class="el-icon-delete" @click="deleteCheckItem(index)" style="display:inline-block;color:#636972;margin-left:20px;cursor: pointer;" title="删除"></i>
                                <i class="el-icon-document-copy" @click="copyCheckItem(index,item)" style="display:inline-block;color:#636972;margin-left:20px;cursor: pointer;" title="复制"></i>
                            </div>
                            <el-checkbox-group v-model="item.checkedAnswer" style="margin-left:42px" disabled v-show="item.type==2">
                                <el-checkbox v-for="(item2,index) in item.questionAnswer" :label="item2.label" :key="index" style="display:block;padding-top:10px;">
                                  <el-input v-model="item2.label"></el-input>
                                </el-checkbox>
                            </el-checkbox-group>
                            <el-radio-group v-model="item.checkedAnswer" disabled v-show="item.type==1" style="display:flex;flex-direction: column;margin-left:42px;" >
                              <el-radio v-for="(item2,index) in item.questionAnswer" :label="item2.label" :key="index" style="width:15%;padding-top:10px">
                                <el-input v-model="item2.label"></el-input>
                              </el-radio>
                            </el-radio-group>
                            <div class="add-singlebutton" @click="addSingleChoose(index,item.questionAnswer)">
                              <i class="iconfont icon-jiahao"></i>
                              <span>添加单个选项</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 78%; margin-left: 70px;margin-bottom:40px">
                    <el-button size="mini" type="default" @click="cancel()"
                    >取消</el-button
                    >
                    <el-button
                    size="mini"
                    type="primary"
                    @click="saveAdd()"
                    >保存</el-button
                    >
                </div>
            </div>
            </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTitle from "@/components/Headertitle/index";
import {
  fetchDetail,
} from "@/api/systemapi/restmanage.js";
export default {
  components: {
    HeaderTitle,
  },
  data() {
    return {
      entNum: "",
      titleList: [{ title: "业务内容配置" } ,{ title: "问卷配置" }],
      infoForm: {
        relatebussiness:"",//关联业务
        skillGroup:"",//技能组
        questionName:"",//问卷名称
        questionTitle:"",//问卷标题
      },
      questionList: [//1 单选  2多选
        {
          questionTitle: '现有平台的能力是否满足您需要？ 请选择：',
          questionAnswer: [
            {label: '选项1', value: '1'},
            {label: '选项2', value: '2'},
            {label: '选项3', value: '3'},
          ],
          checkedAnswer:[],//选中的多选选项
          type: 2,
        },
        {
          questionTitle: '是否对当前服务满意？：',
          questionAnswer: [
            {label: '是', value: '1'},
            {label: '否', value: '2'},
          ],
          checkedAnswer:[],//选中的多选选项
          type: 1,
        },
      ]
    };
  },
  mounted() {
    const { entNum } = this.$route.query;
    this.entNum = entNum;
    this.type = this.$route.query.type;
  },
  methods: {
    //取消
    cancel() {
      this.$router.push({
        name: "questionmanage",
        // params: { entNum: this.entNum },
      });
    },
    getEditData(id) {
      fetchDetail({ id: id }).then((res) => {
        this.infoForm = res.data;
      });
    },
    //保存
    saveAdd() {
      console.log(this.questionList,"this.questionList")
    },
    //删除
    deleteCheckItem(index){
        this.questionList.splice(index,1) //从index的位置开始，删除一个
        console.log(this.questionList,"this.questionList")
    },
    //复制
    copyCheckItem(index,item){
      let str=JSON.stringify(item)
        this.questionList.push(JSON.parse(str))
        console.log(this.questionList)
    },
    //添加单个选项
    addSingleChoose(index,item2){
      console.log(item2,"item2item2222")
      console.log(item2.length,"length")
      item2.push({
        label:"选项"+(item2.length+1),
        value:(item2.length+1).toString()
      })
    },
    //添加问卷问题
    addQuestion(questionType){//1单选 2多选
      this.questionList.push({
        questionTitle: '问题'+(this.questionList.length+1),
          questionAnswer: [
            {label: '选项1', value: '1'},
          ],
          checkedAnswer:[],//多选answer
          type: questionType,
      })
    }
  },
};
</script>
<style lang="scss">
// 问卷问题输入框样式
.content-item .el-input__inner {
    height: 33px;
    font-size: 13px;
    box-shadow: none;
    border: 1px solid white;//默认边框样式
}
 
.content-item .el-input__inner:hover {
    border-color: #ccc;//悬浮式边框样式
}
 
.content-item .el-input__inner:focus {
    border-color: #ccc;//聚焦时的边框颜色
    box-shadow: none;
    transition-duration: .5s;
}
 
.content-item .el-input__inner::-webkit-input-placeholder {
    line-height: 20px;
}
 
.content-item .el-input__inner, .el-checkbox__inner, .el-textarea__inner, .el-button {
    border-radius: 0.5;

}
    
</style>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    .block_left{
        width:15%;
        background: #fff;
        padding: 10px 5px;
        color: #666;
        .left-top{
            padding: 10px;
        }
        .left-bottom{
            display: flex;
            justify-content: space-between;
            padding: 10px;
            font-size: 12px;
            cursor: pointer;
            .bottom-radio{
                border: 1px solid #e8ecef;
                padding: 2px 10px;
            }
            .bottom-checkbox{
                border: 1px solid #e8ecef;
                padding: 2px 10px;
            }
        }
    }
    .block {
      width: 84.3%;
      height: 100%;
      line-height: 100%;
      background: #e8ecef;
      .tab-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        .search-item{
            width:100%;
            background: #fff;
            margin-bottom: 10px;
            padding: 10px 10px 20px;
            font-size: 14px;
            color: #666;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item-list {
                display: flex;
                flex-wrap: wrap;
            }
            .item-con {
                display: flex;
                margin-right: 30px;
                margin-top: 20px;
                span {
                    display: inline-block;
                    line-height: 28px;
                    margin-right: 10px;
                }
            }
        }
        .search_save{
            flex: 1;
            width:100%;
            overflow:auto;
            background: #fff;
            .con-title{
                .content{
                    margin-top: 30px;
                    .content-item{
                        padding: 0 80px 30px 30px;
                        .add-singlebutton{
                          margin: 10px 0 0 42px;
                          font-size:12px;
                          color:#379DFF;
                          cursor: pointer;
                        }
                    }
                }
            }
        }
        
      }
    }
  }
}
</style>
